import { defineComponent, reactive, ref, watch } from 'vue'
import { ElTable, ElTableColumn } from 'element-plus'
// 导入 TableColumnCtx 类型定义，TableColumnCtx 是一个泛型接口，用于定义表格列上下文的类型。类型信息在编译后会被移除，不会影响最终的 JavaScript 代码。
import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
interface columnItem extends TableColumnCtx<void> {
  slotName?: string // 主体插槽
  headerSlot?: string // 头部插槽
  isNoShowColumn: boolean // 是否不显示这列
  children: columnItem[] // 下一列
}

// 定义table组件，defineComponent()附注函数提供了一种更好的类型推断和类型检查。
export default defineComponent({
  name: 'esTable', // 组件名称
  props: { 
    // 表格列字段数组
    tableColumnList: {
      type: Array,
      default: () => [],
    },
  },
  // 函数式组件入口，props响应式对象，传递给组件的所有属性，conexts上下文信息的对象，包含了父组件传递给子组件的属性和方法,包括attrs父组件传递但未被定义的prop属性，slots插槽内容，emit触发自定义事件的方法。
  setup(props, { slots, attrs }) {
    console.log(slots, attrs,'slots, attrs');
    
    // 生成所有列
    const generateColumnList = (list: columnItem[]) => {
      return list.map((item) => generateColumnItem(item))
    }

    // 生成列
    const generateColumnItem = (columnProps: columnItem) => {
      // 若是该列不显示直接返回
      if (columnProps.isNoShowColumn) return 

      // 定义列属性
      columnProps = {
        ...columnProps,
        align: columnProps.align || 'center', // 默认列居中对齐方式
      }
      // 定义默认插槽和头部插槽
      let vSlots: {
        default?: (scope: Record<string, any>) => any
        header?: (scope: Record<string, any>) => any
      } = {}
      const { slotName, headerSlot, children, type, prop } = columnProps

      // 表格内容插槽
      vSlots = slotName
        // 有插槽，自定义插槽
        ? {
            default: slots[slotName],
        }
        // 没有插槽
        : !type
          // 没有type
        ? {
            default: (scope) => {
              return <span v-html={scope.row[prop]}></span>
            },
          }
          // 有type
        : {}

      // 表格头插槽
      vSlots.header = slots[headerSlot as string]

      return (
        <ElTableColumn {...columnProps} v-slots={vSlots}>
          {children && generateColumnList(children)}
        </ElTableColumn>
      )
    }

    //  返回渲染列表，若有子列表，递归渲染子列表
    return () => {
      return (
        <ElTable stripe {...attrs} >
          {generateColumnList(props.tableColumnList as columnItem[])} 
        </ElTable>
      )
    }
  },
})
